<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="myDiv">
            <input type="button" value="从服务端获取数据:" v-on:click="loadData()">
            书刊名(模糊查)：<input type="text" id="bookName">  书刊类型:<input type="text" id="bookType"><input type="button" onclick="queryBooks()" value="查询">
            <table border="1px" >
                <tr>
                    <th>名称</th>
                    <th>isbn</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>图片</th>
                    <th>类别</th>
                    <th>购买页</th>
                    <th>操作</th>
                </tr>
                <tbody id="myTableBody">
                    <!--把服务器返回的数据加载到该代码中-->



                    <tr v-for="book in pageInfo.data">
                        <td>{{book.book_name}}</td>
                        <td>{{book.isbn}}</td>
                        <td>{{book.author}}</td>
                        <td>{{book.publish}}</td>
                        <td><img :src="book.pic_url" width="50px"></td>
                        <td>{{book.type_name}}</td>
                        <td><a :href="book.book_url">点击购买</a></td>
                        <th>操作</th>
                    </tr>

                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="7">
                            <input type="button"  @click="prevPage()"  value="上一页">
                            当前第<strong id="currentPage">{{pageInfo.currentPage}}</strong>页|
                            每页显示<strong id="pageSize">{{pageInfo.pageSize}}</strong>条|
                            共<strong id="totalPage">{{pageInfo.totalPage}}</strong>页|
                            共<strong id="totalCount">{{pageInfo.totalRecord}}</strong>条|
                            <input type="button" @click="nextPage()" value="下一页">
                        </td>

                    </tr>

                </tfoot>


            </table>
    </div>

</body>
</html>


<script src="/js/vue.js"></script>

<!--引用vue.js文件 -->
<script >

    let vue = new Vue({
        el:"#myDiv",
        data:{

            //从Servlet中返回的数据格式为:
            //{"code":0,"msg":"成功","data":{"pageSize":15,"totalPage":6462,"totalRecord":96926,"currentPage":3,"data":[{"book_id":48,"book_name":"魏碑楷书章法教程","isbn":"9787810518895","author":"弓超，杨再春著","publish":"北京体育大学出版社","publish_date":"2003-04-01","pages":124,"book_price":13,"mini_price":12.8,"type_name":"艺术","pic_url":"http://img35.ddimg.cn/41/15/9157145-1_w.jpg","counts":50,"book_url":"http://product.dangdang.com/product.aspx?product_id=9157145"},{"book_id":49,"book_name":"脑血管病诊治与康复――金岸导诊丛书","isbn":"9787509101612","author":"刘永刚，付伟义主编","publish":"人民军医出版社","publish_date":"2006-04-01","pages":261,"book_price":14,"mini_price":13.5,"type_name":"保健/养生","pic_url":"http://img36.ddimg.cn/42/16/9157146-1_w.jpg","counts":7,"book_url":"http://product.dangdang.com/product.aspx?product_id=9157146"},{"book_id":51,"book_name":"田英章硬笔楷书标准教程（附VCD光盘一张）","isbn":"9787810516266","author":"田英章著","publish":"北京体育大学出版社","publish_date":"2005-01-01","pages":114,"book_price":22,"mini_price":13,"type_name":"艺术","pic_url":"http://img38.ddimg.cn/44/18/9157148-1_w.jpg","counts":50,"book_url":"http://product.dangdang.com/product.aspx?product_id=9157148"},{"book_id":52,"book_name":"减肥降脂奇效良方――奇效良方丛书","isbn":"9787509101957","author":"霍英主编","publish":"人民军医出版社","publish_date":"2006-03-01","pages":315,"book_price":32,"mini_price":19,"type_name":"保健/养生","pic_url":"http://img39.ddimg.cn/45/19/9157149-1_w.jpg","counts":15,"book_url":"http://product.dangdang.com/product.aspx?product_id=9157149"},{"book_id":55,"book_name":"田英章硬笔行书标准教程（含VCD一张）","isbn":"9787810516754","author":"田英章著","publish":"北京体育大学出版社","publish_date":"2004-01-01","pages":109,"book_price":19,"mini_price":19,"type_name":"艺术","pic_url":"http://img32.ddimg.cn/48/22/9157152-1_w.jpg","counts":33,"book_url":"http://product.dangdang.com/product.aspx?product_id=9157152"},{"book_id":56,"book_name":"少年儿童电子琴中级教程","isbn":"9787810031783","author":"万宝柱编著","publish":"北京体育大学出版社","publish_date":"2006-04-01","pages":114,"book_price":16,"mini_price":14.1,"type_name":"童书","pic_url":"http://img33.ddimg.cn/49/23/9157153-1_w.jpg","counts":23,"book_url":"http://product.dangdang.com/product.aspx?product_id=9157153"},{"book_id":57,"book_name":"中国硬笔书法教程：硬笔临写名贴指要","isbn":"9787811002959","author":"王玉孝等编著","publish":"北京体育大学出版社","publish_date":"2005-01-01","pages":69,"book_price":10,"mini_price":9.6,"type_name":"艺术","pic_url":"http://img34.ddimg.cn/50/24/9157154-1_w.jpg","counts":34,"book_url":"http://product.dangdang.com/product.aspx?product_id=9157154"},{"book_id":58,"book_name":"篆刻章法","isbn":"9787811002478","author":"贾冠华著","publish":"北京体育大学出版社","publish_date":"2006-03-01","pages":77,"book_price":12,"mini_price":12,"type_name":"艺术","pic_url":"http://img35.ddimg.cn/51/25/9157155-1_w.jpg","counts":46,"book_url":"http://product.dangdang.com/product.aspx?product_id=9157155"},{"book_id":59,"book_name":"毛笔楷书笔法教程（附光盘一张）","isbn":"9787810513340","publish":"北京体育大学出版社","publish_date":"2006-03-01","pages":125,"book_price":27,"mini_price":16.4,"type_name":"艺术","pic_url":"http://img36.ddimg.cn/52/26/9157156-1_w.jpg","counts":4,"book_url":"http://product.dangdang.com/product.aspx?product_id=9157156"},{"book_id":60,"book_name":"少年儿童电子琴初级教程（新版）","isbn":"9787810030434","author":"万宝柱编著","publish":"北京体育大学出版社","publish_date":"2006-04-01","pages":90,"book_price":12,"mini_price":9.3,"type_name":"童书","pic_url":"http://img37.ddimg.cn/53/27/9157157-1_w.jpg","counts":18,"book_url":"http://product.dangdang.com/product.aspx?product_id=9157157"},{"book_id":61,"book_name":"英美经典电影名篇名句赏析（成长篇）（附MP3光盘一张）","isbn":"9787810389471","author":"朱晨主编","publish":"东华大学出版社","publish_date":"2006-01-01","pages":202,"book_price":18,"mini_price":15.6,"type_name":"外语","pic_url":"http://img38.ddimg.cn/54/28/9157158-1_w.jpg","counts":45,"book_url":"http://product.dangdang.com/product.aspx?product_id=9157158"},{"book_id":62,"book_name":"英美经典电影名篇名句赏析（浪漫爱情篇）(附MP3光盘一张）","isbn":"9787810389471","author":"朱晨主编","publish":"东华大学出版社","publish_date":"2006-01-01","pages":204,"book_price":18,"mini_price":16.1,"type_name":"外语","pic_url":"http://img39.ddimg.cn/55/29/9157159-1_w.jpg","counts":22,"book_url":"http://product.dangdang.com/product.aspx?product_id=9157159"},{"book_id":63,"book_name":"英美经典电影名篇名句赏析（卡通篇）（附MP3光盘一张）","isbn":"9787810389471","author":"朱晨主编","publish":"东华大学出版社","publish_date":"2006-01-01","pages":200,"book_price":18,"mini_price":15.6,"type_name":"外语","pic_url":"http://img30.ddimg.cn/56/30/9157160-1_w.jpg","counts":50,"book_url":"http://product.dangdang.com/product.aspx?product_id=9157160"},{"book_id":67,"book_name":"三教九流","isbn":"9787802013599","author":"翟文明编著","publish":"中国和平出版社","publish_date":"2006-02-01","pages":269,"book_price":26,"mini_price":26,"type_name":"社会科学","pic_url":"http://img31.ddimg.cn/57/31/9157161-1_w.jpg","counts":8,"book_url":"http://product.dangdang.com/product.aspx?product_id=9157161"},{"book_id":68,"book_name":"人一生要读的60封家书――彩色图书之旅","isbn":"9787802013506","author":"傅雷，海明威等著","publish":"中国和平出版社","publish_date":"2006-02-01","pages":269,"book_price":26,"mini_price":26,"type_name":"传记","pic_url":"http://img32.ddimg.cn/58/32/9157162-1_w.jpg","counts":25,"book_url":"http://product.dangdang.com/product.aspx?product_id=9157162"}]}}
            //利用vue把服务端返回的数据依次填充到pageInfo对象中。

            pageInfo:{
                pageSize:0,
                totalPage:0,
                totalRecord:0,
                currentPage:1,
                data:[]  //用于ajax技术获得了书刊信息后，把书刊信息push到该data数组中

            }

        },
        methods:{
            prevPage:function(){
                this.pageInfo.currentPage -=1;
                this.loadData();//调用当前vue实例中的loadData函数
            },
            nextPage:function(){
                this.pageInfo.currentPage +=1;
                this.loadData();
            },
            loadData:function () {
                //用ajax技术 获得后端的数据   axios

                //定义局部变量
                let _this = this;//把当前的vue实例对象赋给_this
                //在loadData对应的function里面写this,this代表当前的vue实例
            //    this.pageInfo
                console.log("loadData函数中的this:",this)
                let xmlHttpRequest = new XMLHttpRequest();

                xmlHttpRequest.open("GET","/BookServlet2?currentPage="+this.pageInfo.currentPage);

                xmlHttpRequest.send(null);

                xmlHttpRequest.onreadystatechange = function () {
                    if (xmlHttpRequest.readyState==4){
                        let obj = JSON.parse(xmlHttpRequest.responseText) ;
                        if (obj.code==0){
                            //  ;//找到tr对象
                            // document.getElementById("myTableBody").removeChild( inputObj.parentElement.parentElement)
                          //  console.log("在xmlhtttpreqeust的回调函数中的this：",this)
                          //  console.log(obj.data.pageSize);
                          //  console.log(_this.pageInfo)
                            //把服务端返回的json串解析为js对象，把相应的分页的数据赋给当前vue实例中的pageInfo
                            _this.pageInfo.currentPage=obj.data.currentPage;
                            _this.pageInfo.pageSize=  obj.data.pageSize;
                            _this.pageInfo.totalPage=obj.data.totalPage;
                            _this.pageInfo.totalRecord=obj.data.totalRecord;

                            _this.pageInfo.data.splice(0,_this.pageInfo.data.length);//请空数组中的数据


                            for(let i=0;i<obj.data.data.length;i++){
                                //把数组中的每一个元素push到当前paageInfo的data数组中
                                _this.pageInfo.data.push(obj.data.data[i]);
                            }

                        }else{
                            alert(obj.msg);
                        }
                    }
                }
            }
        }

    })



</script>